<template>
	<view class="content">
		<scroll-view :scroll-top="scrollTop" scroll-y="false" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="title_list" v-for="(item,index) in classlist" @click="tabb(item.id,item.uid)">
				<view class="aaa" :style="{background:a==item.id?'#409CFD':''}">

				</view>
				<view class="title_text">
					<text>{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
		<scroll-view :scroll-top="scrollTop" scroll-y="false" class="scroll-right" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll" :scroll-with-animation="true" :scroll-into-view="current">

			<view class="goods_list" v-for="(item,index) in classlist" :key="index" :id="item.uid">
				<view class="goods_name">
					{{item.name}}

				</view>
				<view class="goods_title">
					<view class="goods_title_list" v-for="itemson in item.list" @click="todetails(itemson)">
						<image style="width: 128rpx; height: 128rpx;" :src="itemson.img_url" mode=""></image>
						<text>{{itemson.name}}</text>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var _that
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				a: 0,
				ida: "",
				current: "",
				classlist: [{
						id: 0,
						classname: "幼儿园设备",
						uid: "uid1",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 1,
						classname: "语言",
						uid: "uid2",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 2,
						classname: "数学",
						uid: "uid3",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 4,
						classname: "英语",
						uid: "uid4",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 5,
						classname: "综合领域",
						uid: "uid5",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 6,
						classname: "艺术",
						uid: "uid6",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 7,
						classname: "特色课程",
						uid: "uid7",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 8,
						classname: "幼小衔接",
						uid: "uid8",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 9,
						classname: "游戏装备",
						uid: "uid9",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 10,
						classname: "教室区角",
						uid: "uid10",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 11,
						classname: "消毒产品",
						uid: "uid11",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
					{
						id: 12,
						classname: "幼小衔接",
						uid: "uid8",
						goodslist: [{
								goodsid: 0,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 1,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							},
							{
								goodsid: 2,
								goodsname: '语文书',
								goodsimg: '../../../static/class/goods.png'
							}
						]
					},
				]


			}
		},
		onLoad() {
			_that = this
			_that.get_index();
		},
		methods: {
			todetails(item){
				console.log("item123",item)
				uni.navigateTo({
					url:'/pages/index/home/goods_details?id=' + item.pid
				})
			},
			tabb(id, uid) {
				this.a = id
				this.current = uid
				console.log(this.current)
			},
			get_index(){
				uni.request({
					url: helper.web + '/api/index/getAllCateList',
					method: 'GET',
					header:{
						token:uni.getStorageSync("token")
					},
					success: resa => {
						console.log('用户管理-首页全部分类数据', resa);
						_that.classlist = resa.data.data
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		display: flex;
	}

	.aaa {
		width: 16rpx;
		height: 116rpx;

		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.scroll-view {
		height: 200rpx;
	}

	.scroll-Y {
		width: 240rpx;
	}

	.title_list {
		height: 116rpx;
		display: flex;
		width: 240rpx;
		align-items: center;
		background-color: #F8F8F8;
		justify-content: center;
		border-bottom: 1px solid #E5E5E5;
	}

	.title_list22 {
		height: 116rpx;
		display: flex;
		width: 220rpx;
		align-items: center;
		background-color: #F8F8F8;

		border-left: 20rpx solid #409CFD;
	}

	.title_text {
		width: 224rpx;
		height: 116rpx;
		align-items: center;
		text-align: center;
		display: flex;
		justify-content: center;
		
	}

	.goods_title_list {
		width: 128rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin: 12px 20rpx 12rpx 20rpx;
	}

	.goods_title_list text {
		padding-top: 16rpx;
		margin: auto;

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_list {
		margin-top: 32rpx;
	}

	.goods_name {
		width: 160rpx;
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 19rpx;
	}

	.goods_title {
		display: flex;
		flex-wrap: wrap;

	}
</style>